<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 500px;
            background-color: blueviolet;
            text-align: center;
            /* 设置文字垂直居中 文字行高 */
            line-height: 500px;
           /* 设置需要过度的属性 */
            /* transition-property: font-size; */
            /* 设置过度时长 */
            /* transition-duration: 2s; */
            /* 设置过度速度 */
            /* transition-timing-function: linear; */
            /* 设置多个过度属性 */
            transition:font-size 2s ease-in,background-color 2s ease-in-out ;
            /* 触发过度效果 */
            div:hover{
                font-size:68px ;
                background-color: cyan; 
            }
            img{
                /* 图片进行缩放width */
                /* width: 320px; */
                /*  */
                transition: transform 2s ease-in-out;
            img:hover{
                transform: scale(1.2)
            };
            }
        }
    </style>
</head>
<body>
   <div>孙颖莎王楚钦

   </div> 
   <img width="260px" src="../音视频/ad12.jpg">
</body>
</html>